<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Admin</title>
    <link rel="icon" href="./img/favicon.ico" type="image/x-icon" />
    <link
      rel="stylesheet"
      href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="./node_modules/bootstrap-icons/font/bootstrap-icons.css"
    />

    <link href="./css/index.css" rel="stylesheet" />
  </head>
  <body>
    <nav id="sidebar">
      <div class="sidebar-header">
        <a href="./home.html" target="mainFrame">
          <i class="bi bi-bootstrap"></i> Bootstrap
        </a>
      </div>

      <ul class="components" id="menu-ul"></ul>
    </nav>

    <div id="content">
      <!-- 顶部导航栏 -->
      <nav class="navbar">
        <div class="">
          <div class="d-flex align-items-center">
            <div
              id="user-info-dropdown"
              class="user-info"
              data-bs-toggle="dropdown"
            >
              <img
                id="profile-avatar"
                src="https://ui-avatars.com/api/?name=Admin&background=6366f1&color=fff"
                alt="用户头像"
              />
              <span id="profile-username">Admin</span>
            </div>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <a class="dropdown-item" href="#"
                  ><i class="fas fa-user me-2"></i>个人资料</a
                >
              </li>
              <!-- <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i>设置</a></li> -->
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li>
                <a class="dropdown-item logout-btn" href="#">
                  <i class="fas fa-sign-out-alt me-2"></i>退出登录
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <!-- 主内容区域 -->
      <div class="main-content fade-in">
        <iframe
          id="main-frame"
          name="mainFrame"
          src="home.html"
          frameborder="0"
          style="width: 100%; height: 100%"
        ></iframe>
      </div>
    </div>

    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./node_modules/axios/dist/axios.min.js"></script>

    <script src="./js/index.js"></script>
    <script src="./utils/request.js"></script>
    <script src="./utils/store.js"></script>
  </body>
</html>
